@import "../../../../css/mobile/components/normalize";
@import "../../../../css/mobile/components/font";

.container {
	line-height: 0;

	.banner {
		width: 100%;
	}

	.top-progress {
		width: 750px;
		height: 14px;
	}

	.top-title {
		height: 29px;
		font-size: 30px;
		font-family: "PingFangSC-Medium";
		font-weight: 500;
		line-height: 30px;
		color: rgba(17, 17, 17, 1);
		margin: 45px 0 0 25px;
		padding-bottom: 37px;
	}

	.login {
		text-align: center;
		position: relative;

		.mobileLabel,
		.receiveMobileLabel,
		.codeLabel,
		.receiverLabel,
		.addressLabel,
		.locationLabel {
			text-align: left;
			line-height: 82px;
			width: 200px;
			height: 82px;
			font-size: 26px;
			font-family: PingFangSC;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			position: absolute;
			text-indent: 10px;
			float: left;
			z-index: 1;
		}
		.inputContent {
			position: relative;
		}
		input,
		textarea {
			position: relative;
			width: 680px;
			height: 82px;
			line-height: normal;
			color: rgba(51, 51, 51, 1);
			border: 0;
			border-bottom: 1px solid rgba(221, 221, 221, 1);

			outline: none;
			appearance: none;
			text-align: left;
			font-size: 26px;
			font-family: PingFangSC;
			text-indent: 202px;

			&::placeholder {
				font-weight: 300;
				color: rgba(200, 200, 200, 1);
			}
		}
		.arrow {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 51px;
			width: 12px;
			height: 22px;
		}
		textarea {
			width: 480px;
			text-indent: 0px;
			padding-left: 202px;
			padding-top: 22px;
			resize: none;
		}
		textarea#address {
			height: 130px;
		}

		#getCode {
			width: 170px;
			height: 56px;
			font-size: 25px;
			line-height: 56px;
			border: 1px solid #00c800;
			border-radius: 28px;
			font-family: PingFangSC;
			font-weight: 300;
			color: #00c800;
			position: absolute;
			right: 52px;
			bottom: 10px;

			&[disabled] {
				border: 1px solid rgba(210, 210, 210, 1);
				color: rgba(193, 193, 193, 1);
			}
		}
	}

	.user-info {
		height: 140px;
		position: relative;
		background-color: #5ea6ff;

		.avatar {
			width: 86px;
			height: 86px;
			position: absolute;
			top: 27px;
			left: 55px;
			border-radius: 50%;
		}

		.nickname {
			height: 28px;
			font-size: 28px;
			line-height: 28px;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: #ffffff;
			position: absolute;
			top: 57px;
			left: 173px;
		}

		.switch-account {
			width: 170px;
			height: 56px;
			border-radius: 28px;
			font-size: 26px;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: #5ea6ff;
			background-color: #fff;
			line-height: 56px;
			text-align: center;
			position: absolute;
			top: 42px;
			right: 56px;
		}
	}

	.product-info {
		position: relative;

		// .person {
		//   width: 74px;
		//   height: 40px;
		//   font-size: 28px;
		//   line-height: 40px;
		//   background: rgba(100, 203, 250, 1);
		//   border-radius: 6px;
		//   font-family: PingFangSC-Medium;
		//   font-weight: 500;
		//   color: rgba(255, 255, 255, 1);
		//   text-align: center;
		//   display: inline-block;
		//   position: absolute;
		//   top: 70px;
		//   left: 58px;
		// }

		.title {
			height: 30px;
			font-size: 30px;
			line-height: 30px;
			display: inline-block;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: #111111;
			position: absolute;
			top: 60px;
			left: 50px;
		}

		.info-list {
			position: absolute;
			top: 143px;
			left: 103px;

			.info {
				margin: 22px auto;
				height: 26px;
				font-size: 26px;
				line-height: 26px;
				font-family: PingFangSC;
				font-weight: 300;
				position: relative;
				color: rgba(159, 159, 159, 1);

				&:before {
					content: "" !important;
					display: inline-block;
					width: 20px;
					height: 20px;
					background: rgba(255, 255, 255, 1);
					border: 6px solid #c2d5ed;
					border-radius: 50%;
					box-sizing: border-box;
					position: absolute;
					top: 3px;
					left: -50px;
				}
			}
		}
	}

	.buy-bottom-bar {
		width: 100%;
		height: 110px;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		border-top: 1px solid #e5e5e5;
		z-index: 1;
		box-sizing: border-box;

		.price-info {
			height: 38px;
			font-size: 32px;
			line-height: 38px;
			font-weight: bold;
			font-family: PingFangSC-Regular;
			color: rgba(102, 102, 102, 1);
			position: absolute;
			top: 40px;
			left: 110px;

			.price {
				color: rgba(100, 203, 250, 1);

				.big {
					font-size: 46px;
				}
			}
		}

		.buy {
			width: 310px;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			background: #99e999;
			text-align: center;
			font-size: 32px;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 110px;
			.wxzf {
				margin-bottom: 10px;
				margin-right: 20px;
				vertical-align: middle;
				width: 57px;
				height: 50px;
			}
		}
		.allDone {
			background-color: #00c800;
		}
	}
}

.gearArea {
	font-family: PingFangSC-Medium, Helvetica, Arial, sans-serif;
	display: block;
	background-color: rgba(0, 0, 0, 0.6);
	color: #333333;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9900;
	overflow: hidden;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.area_ctrl {
	vertical-align: middle;
	background-color: #d5d8df;
	margin: 0;
	height: 596px;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 9901;
	overflow: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.slideInUp {
	-webkit-animation: slideInUp 0.3s;
	animation: slideInUp 0.3s;
}

@-webkit-keyframes slideInUp {
	from {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes slideInUp {
	from {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.area_roll {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	height: 517px;
	overflow: hidden;
	background-color: #fff;
	-webkit-mask: -webkit-gradient(linear, 0% 50%, 0% 100%, from(#fff), to(rgba(255, 255, 255, 0.3)));
	-webkit-mask: -webkit-linear-gradient(top, #fff 25%, rgba(255, 255, 255, 0))
	// -webkit-mask: -webkit-gradient(linear, 0% 50%, 0% 100%, from(#debb47), to(rgba(36, 142, 36, 0)));
	// -webkit-mask: -webkit-linear-gradient(top, #debb47 50%, rgba(36, 142, 36, 0))
}

.area_roll > div {
	font-size: 36px;
	height: 100%;
	float: left;
	background-color: transparent;
	position: relative;
	overflow: hidden;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.area_roll > div .gear {
	width: 100%;
	float: left;
	position: absolute;
	z-index: 9902;
	margin-top: 4em;
}

.area_roll_mask {
	-webkit-mask: -webkit-gradient(linear, 0% 40%, 0% 0%, from(#fff), to(rgba(255, 255, 255, 0.6)));
	-webkit-mask: -webkit-linear-gradient(bottom, #fff 50%, rgba(255, 255, 255, 0.6));
	// -webkit-mask: -webkit-gradient(linear, 0% 40%, 0% 0%, from(#debb47), to(rgba(36, 142, 36, 0)));
	// -webkit-mask: -webkit-linear-gradient(bottom, #debb47 50%, rgba(36, 142, 36, 0));
	padding: 0;
}

.area_grid {
	position: relative;
	top: 4em;
	width: 100%;
	height: 2em;
	margin: 0;
	box-sizing: border-box;
	z-index: 0;
	border-top: 2px solid rgba(83, 156, 255,0.4);
	border-bottom: 2px solid rgba(83, 156, 255,0.4);
	// border-top: 2px solid #E5E5E5;
	// border-bottom: 2px solid #E5E5E5;
}

.area_roll > div:nth-child(3) .area_grid > div {
	left: 42%;
}

.area_btn {
	text-align: center;
	height: 78px;
	font-size: 34px;
	font-family: PingFangSC;
	font-weight: bold;
	padding-right: 42px;
	padding-left: 42px;
	color: #5EA6FF;
	line-height: 78px;
}
.area_btn.larea_cancel {
	color: #666666;
}

.area_btn_box:before,
.area_btn_box:after {
	content: "";
	position: absolute;
	height: 1px;
	width: 100%;
	display: block;
	background-color: #dcdcdc;
	z-index: 15;
	// -webkit-transform: scaleY(0.33);
	//         transform: scaleY(0.33)
}

.area_btn_box {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	background-color: #fff;
	height: 78px;
	position: relative;
}

.area_btn_box:before {
	left: 0;
	top: 0;
	-webkit-transform-origin: 50% 20%;
	transform-origin: 50% 20%;
}

.area_btn_box:after {
	left: 0;
	bottom: 0;
	-webkit-transform-origin: 50% 70%;
	transform-origin: 50% 70%;
}

.tooth {
	height: 2em;
	line-height: 2em;
	text-align: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	overflow: hidden;
}
